<template>
  <el-form-item class="edit-form-item" :label-width="labelWidth" :required="config.required">
    <template #label style="display: inline-block">
      <form-tinymce v-if="config.showLabel" :inline="true" v-model="config.label" @input="handleChangeLabel" />
      <span
        v-if="currentItem.examConfig && currentItem.examConfig.score && currentItem.examConfig.enableScore"
        class="text-after"
      >
        (最高分值:{{ currentItem.examConfig.score }} 分)
        <span v-if="currentItem.examConfig.answer" style="color: #13ce66; margin-left: 20px">
          正确答案：{{ getExamAnswer }}
        </span>
      </span>
    </template>
    <!--     特殊处理组件 会对值进行包装等操作-->
    <template v-if="componentList.includes(currentItem.typeId)">
      <component
        :is="currentItem.config.tag"
        v-model="currentItem.config.defaultValue"
        class="form-item-component"
        :item="currentItem"
        :mode="'design'"
        @input="handleDefaultValue"
      />
    </template>
    <template v-else>
      <!--    其他无特殊处理组件-->
      <component
        :is="currentItem.config.tag"
        v-model="currentItem.config.defaultValue"
        class="form-item-component"
        v-bind="{ ...currentItem }"
        :mode="'design'"
        @input="handleDefaultValue"
      />
    </template>
  </el-form-item>
</template>

<script>
import '../../components/FormItem/autoRegister.js'
import draggable from 'vuedraggable'
import FormTinymce from '../tinymce'
import { getCheckedLabel } from '../GenerateForm/FormItemLabel'

export default {
  name: 'FormItem',
  components: {
    FormTinymce,
    draggable
  },
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 这些组件值需要被包装 需要特殊处理
      componentList: [
        'RADIO',
        'CHECKBOX',
        'SELECT',
        'IMAGE_CAROUSEL',
        'IMAGE_UPLOAD',
        'UPLOAD',
        'CASCADER',
        'IMAGE_SELECT',
        'INPUT',
        'DATE',
        'RATE',
        'SLIDER',
        'NUMBER',
        'FUNCTION_CALC',
        'PROVINCE_CITY'
      ]
    }
  },
  computed: {
    config() {
      return this.currentItem.config
    },
    labelWidth() {
      return this.config.labelWidth ? `${this.config.labelWidth}px` : null
    },
    getExamAnswer() {
      if (['RADIO', 'CHECKBOX', 'IMG_SELECT', 'SELECT'].includes(this.currentItem.typeId)) {
        return getCheckedLabel(
          this.currentItem.examConfig.answer,
          this.currentItem.config.options,
          this.currentItem,
          {}
        ).join(',')
      } else {
        return this.currentItem.examConfig.answer
      }
    }
  },
  methods: {
    handleDefaultValue(val) {
      this.$set(this.currentItem.config, 'defaultValue', val)
    },
    handleChangeLabel(val) {
      this.$set(this.currentItem.config, 'label', val)
      this.$emit('change', this.currentItem)
    },
    getComponentName(item) {
      return item.config.tag
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-component::after {
  display: unset;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0);
}

::v-deep .el-form-item__label {
  width: 100% !important;
}

.el-form-item__label > div {
  border-radius: 3px;
  display: inline-block;
  width: 95%;
  border: 1px dashed transparent;
}

.el-form-item__label > div:hover {
  border: 1px dashed #d8d8d8;
}

::v-deep .el-form-item__label:before {
  vertical-align: top;
  margin-top: 0.15em;
  display: inline-block;
}

.text-after {
  color: #1890ff;
  margin-left: 10px;
  display: block;
}
</style>
